<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 12088
  Date: 2023/7/25
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>模块列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery.js"></script>
    <script src="js/layer.js"></script>
</head>

<style>
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("img/bg4.jpeg");
        /* 设置背景图片透明度 */
        opacity: 0.1;
        z-index: -1; /* 将伪元素放置于页面下方 */
    }
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header  layui-bg-blue">
        <div class="layui-logo  layui-bg-blue layui-nav-img"
             style="font-weight: bold;font-size: 17px">
            <img src="img/bg3.jpg" alt="logo" style="width: 55px; height: auto;">
            石油大学软件缺陷管理系统</div>
        <ul class="layui-nav layui-layout-left"></ul>
        <c:if test="${loginUser==null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login.jsp">请登录</a></li>
            </ul>
        </c:if>
        <c:if test="${loginUser!=null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a>${loginUser.username}</a></li>
                <li class="layui-nav-item"><a href="authLogout">退出登录</a></li>
            </ul>
        </c:if>
    </div>

    <div class="layui-side layui-bg-blue">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边栏 -->
                <jsp:include page="menu.jsp">
                    <jsp:param value="active" name="Module_active"/>
                </jsp:include>
            </ul>
        </div>
    </div>


    <div class="layui-body">

        <div class="search_style" style="padding-left: 15px;">
            <div class="searchTable">
                <div class="layui-inline" style="margin-top: -28px">搜索：</div>
                <div class="layui-inline"  >
                    <form class="layui-form layui-form-pane" action="" style="margin-top: -5px">
                        <div class="layui-form-item">

                            <div class="layui-inline"  >
                                <input id="modId" type="text" class="layui-input" style="width: 100px;" placeholder="模块编号">
                            </div>
                            <div class="layui-inline"  >
                                <input id="modName" type="text" class="layui-input" style="width: 100px;" placeholder="模块名称">
                            </div>
                            <div class="layui-inline" style="width: 150px;" >
                                <select name="project" lay-search="" id="prjId" >
                                    <option value="">所属项目</option>
                                </select>
                            </div>

                            <div class="layui-inline" style="margin-top: 15px" >
                                <div class="layui-form-item" >
                                    <button class="layui-btn layui-bg-blue" lay-submit lay-filter="save_filter">查询</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>




<%--     style="float:right"   style="left: 35%;"--%>
            <table id="tb_mod" class="layui-table " lay-filter="mod_filter" style="margin-top: -35px"></table>

            <script type="text/html" id="barMod">
                <button class="layui-btn layui-bg-blue  layui-btn-xs" lay-event="update">编辑</button>
                <c:if test="${loginUser.userType == '管理员'}">
                        <button class="layui-btn layui-bg-red    layui-btn-xs" lay-event="delete">删除</button></c:if>

            </script>
    </div>
</div>


<script src="js/layui/layui.js"/>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
<script type="text/html" id="myToolbar">
    <div class="layui-btn-container">
        <c:if test="${loginUser.userType == '管理员'}"><button class='layui-btn layui-btn-sm layui-bg-blue' lay-event='add'>添加</button></c:if>
    </div>
</script>
<script>
    //获取项目列表
    let prjList = [];
    $.ajax({
        url: 'getPrjList',
        data: {userId: ${loginUser.id}},
        dataType: 'json',
        type: 'get',
        async: false,
        success: function (data) {

            for (const x of data) {
                prjList.push(x.id)
            }
            console.log(prjList)
        }
    })

    var $;//为了获得jquery请求
    var table;
    var old_prjId;
    layui.use(['table','jquery','layer'],function () {
        table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        $=layui.jquery;//启用layui自带的jquery

        $.ajax({
            url:"getAllProjectList",
            type:"GET",
            dataType:"json",
            success:function(result){
                var list = result;    //返回的数据
                var project = document.getElementById("prjId"); //server为select定义的id
                for(var p in list){
                    var option = document.createElement("option");  // 创建添加option属性
                    option.setAttribute("value",list[p].id); // 给option的value添加值
                    option.innerText=list[p].id+"  ("+list[p].proName+")";     // 打印option对应的纯文本
                    project.appendChild(option);           //给select添加option子标签
                    form.render("select");            // 刷性select，显示出数据
                }
            }
        })




        var inst = table.render({
            elem:'#tb_mod',
            url:"getModList",
            toolbar: '#myToolbar',
            cols:[[
                {field: 'modId',title:'模块编号',sort: true, fixed: 'left'},
                {field: 'modName',title:'模块名称'},
                {field: 'prjId',title:'所属项目ID'},
                {fixed: 'right', title:'操作', templet: function (d) {
                        //判断是否是该用户负责的项目
                        for (const x of prjList) {
                            if (d.prjId == x || ${loginUser.userType == '管理员'}) {
                                return '<button class="layui-btn layui-bg-blue  layui-btn-xs" lay-event="update">编辑</button> <button class="layui-btn layui-bg-red  layui-btn-xs" lay-event="delete">删除</button>'
                            }
                        }
                        return ""

                    } ,align: 'center',fixed: 'right',width:130}
            ]],
            defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            even: true,
            page: true,
            limits: [10, 20, 30, 50],
            limit: 10
        });
        //table的工具栏事件，在use中
        table.on('tool(mod_filter)',function (obj) {
            console.log(obj); // 查看对象所有成员
            var data=obj.data;//点击行的数据
            old_prjId=data.prjId;
            switch(obj.event){
                case 'update':
                    //模块更新
                    layer.open({
                        type: 2,//1 content输入文本 2表示content输入页面jsp
                        // title:['更新模块信息','color:blue;font-size:18px'],//标题设置
                        area: ['500px', '350px'], // 宽高
                        fixed: false,
                        maxmin: true,
                        content: 'updateMod.jsp',
                        success:function (layero,index) {
                            var body = layer.getChildFrame('body',index);
                            //往body对话框传数据

                            body.find("#modId").val(data.modId);
                            body.find("#modName").val(data.modName);
                            body.find("#old_prjId").val(data.prjId);
                        }
                    });
                    break;

                case 'delete':
                    //layui:提示对话框是否要删除
                    layer.confirm('确定删除', function (index) {
                        //向服务端发送删除指令
                        $.ajax({
                            url: 'deleteMod',
                            type: 'POST',
                            data:{'modId':data.modId},
                            dataType: 'JSON',
                            success : function(data) {
                                if(data.code==0){
                                    alert(data.msg);
                                    table.reload('tb_mod');//重载表格
                                }
                            },
                            error:function(){
                                alert("服务器异常，请稍后重试.");
                            }
                        });
                        layer.close(index);
                    });
/*                    $.ajax({
                        url: 'deleteMod',
                        type: 'POST',
                        data:{'modId':data.modId},
                        dataType: 'JSON',
                        success : function(data) {
                            if(data.code==0){
                                alert(data.msg);
                                table.reload('tb_mod');//重载表格
                            }
                        },
                        error:function(){
                            alert("服务器异常，请稍后重试.");
                        }
                    });*/
                    break;
            }
        })

        table.on('toolbar(mod_filter)', function (obj) {
            if ('add' == obj.event) {
                newMod();
            }

        });


        form.on('submit(save_filter)', function(){
            search();
            return false;
        });
    });







    //1查询函数，点击响应
    function search() {
        table.reload('tb_mod',{
            where:{modId:$("#modId").val(),
                modName:$("#modName").val(), prjId:$("#prjId").val()},
            page:{
                curr:1
            }

        })

    }


    //2跳出添加窗口，点击响应，打开添加信息页面
    function  newMod() {
        layer.open({
            type: 2,//1 content输入文本 2表示content输入页面jsp
            // title:['模块添加','color:blue;font-size:18px'],//标题设置
            area: ['500px', '350px'], // 宽高
            fixed: false,
            maxmin: true,
            content: 'addMod.jsp',
            success:function (layero,index) {
                var body = layer.getChildFrame('body',index);
            }
        });
    }

    //3添加函数，子类调用
    function addMod(modId,modName,prjId) {
        $.ajax({
            url: 'addMod',
            type: 'POST',
            data:{'modId':modId,'modName':modName,'prjId':prjId},
            dataType: 'JSON',
            success : function(data) {
                if(data.code==0){
                    alert(data.msg);
                    table.reload('tb_mod');//重载表格
                }
            },
            error:function(){
                alert("服务器异常，请稍后重试.");
            }
        });
    }

    //4修改函数
    function updateMod(modId,modName,prjId) {
        $.ajax({
            url: 'updateMod',
            type: 'POST',
            data:{'modId':modId,'modName':modName,'prjId':prjId},
            dataType: 'JSON',
            success : function(data) {
                if(data.code==0){
                    alert(data.msg);
                    table.reload('tb_mod');//重载表格
                }
            },
            error:function(){
                alert("服务器异常，请稍后重试.");
            }
        });
    }






</script>
</body>
</html>
